<div ng-init="init();" class="kmi-layout-content mobile11-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobile11.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="padding: 8px; border-bottom: 1px #cecece solid;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile11.loading_time' | translate"></label>
                <label class="value" ng-bind="loading_time"></label>
                <div style="flex: 1;"></div>
                <button class="kmi-button__mobile" ng-click="upDate();" style="flex: 0 0 60px;">
                    <label ng-bind="'mobile11.refresh' | translate"></label>
                    <div class="kmi-can-click"></div>
                </button>
            </div>
        </div>
        <div class="kmi-layout-page" style="padding: 0px;">
            <!-- 工廠開窗 / 當月 / 當周 -->
            <div class="kmi-row-fields">
                <div class="column-item select-factory">
                    <div class="kmi-text-fields">
                        <input ng-model="factory_no" readonly="readonly" ng-click="changeFactoryNo();"></input>
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    </div>
                </div>
                <div class="column-item select-date" style="margin-left: 0px;" ng-class="{'is-select': nowState == 'Month'}">
                    <label class="label" ng-bind="'mobile11.month' | translate" ng-click="getOneMonth();"></label>
                </div>
                <div class="column-item select-date" ng-class="{'is-select': nowState == 'Week'}">
                    <label class="label" ng-bind="'mobile11.week' | translate" ng-click="getOneWeek();"></label>
                </div>
            </div>
            <!-- 預計產量 / 實際產量 -->
            <div class="kmi-row-fields">
                <div class="column-item" style="color: #293F5D">
                    <label class="label" ng-bind="'mobile11.list.except_qty' | translate"></label>
                    <label class="value" ng-bind="except_qty"></label>
                </div>
                <div class="column-item" style="color: #ffb307">
                    <label class="label" ng-bind="'mobile11.list.actual_qty' | translate"></label>
                    <label class="value" ng-bind="actual_qty"></label>
                </div>
            </div>
            <!-- 折線圖 -->
            <div class="kmi-row-fields">
                <div id="lineGraph">
                </div>
            </div>
            <!-- 工廠資料 -->
            <div class="factory-data-panel">
                <div class="factory-data-content">
                    <!-- 日期 -->
                    <div class="all-date-panel" ng-repeat-start="date in allDate track by $index" ng-click="openOpData(date);">
                        <div class="switch-icons" ng-class="{'is-select-date': date.switch == true}">
                            <!-- <i class="material-icons close">remove</i>
                            <i class="material-icons open">add</i> -->
                            <img class="material-icons close" src="image/icons/24x24-1.png" style="width:30px;height:30px;"></img>
                            <img class="material-icons open" src="image/icons/24x24.png" style="width:30px;height:30px;"></img>
                        </div>
                        <label class="label" ng-bind="date.date_no" style="padding-left: 3px;"></label>
                        <div class="kmi-can-click"></div>
                    </div>
                    <!-- 工單 -->
                    <div class="op-data-panel" ng-style="date.style">
                        <div class="op-data-content" ng-repeat-start="opData in date.opData track by $index" ng-click="openPlotData(opData);">
                            <div class="switch-icons" ng-class="{'is-select-opData': opData.switch == true}">
                                <i class="material-icons close">remove_circle_outline</i> 
                                <i class="material-icons open">add_circle_outline</i>
                            </div>
                            <div class="op-data-left-content">
                                <div class="op-data-item">
                                    <label ng-bind="('mobile11.list.wo_no' | translate) + opData.mo_no"></label>
                                </div>
                                <div class="op-data-item">
                                    <label ng-bind="('mobile11.list.product_no' | translate) + opData.Product_no"></label>
                                </div>
                                <div class="op-data-item">
                                    <label ng-bind="('mobile11.list.product_name' | translate) + opData.Product_name"></label>
                                </div>
                            </div>
                            <div class="op-data-right-content">
                                <div mdl-piechart datas="opData.loading_op_qty" config="opData.pieChart_config"></div>
                                <div class="op-data-pieChart">
                                    <i class="material-icons" style="color:#ffb307;" ng-show="opData.loading_op_qty[0].value == 0">close</i>
                                    <label class="value" style="color: #49A8EE;" ng-bind="opData.loading_op_qty[0].value+'%'" ng-show="opData.loading_op_qty[0].value > 0 && opData.loading_op_qty[0].value < 100"></label>
                                    <i class="material-icons" style="color: #68bd84;" ng-show="opData.loading_op_qty[0].value >= 100">check</i>
                                </div>
                                <div class="op-data-qty">
                                    <label class="value" ng-bind="opData.inv_qty" style="color: #ffb307"></label>
                                    <label class="label">/</label>
                                    <label class="value" ng-bind="opData.mo_qty" style="color: #293f5d"></label>
                                </div>
                            </div>
                            <div class="kmi-can-click"></div>
                        </div>
                        <!-- 生產批 -->
                        <div class="plot-data-panel" ng-style="opData.style">
                            <div class="plot-data-content" ng-repeat="plotData in opData.plotData track by $index">
                                <div class="plot-data-item">
                                    <div class="plot-data-title">
                                        <label class="label" ng-bind="('mobile11.list.plot_no' | translate) + plotData.lot_no"></label>
                                    </div>
                                    <div class="plot-data-qty">
                                        <label class="value" ng-bind="plotData.inv_qty" style="color: #ffb307"></label>
                                        <label class="label">/</label>
                                        <label class="value" ng-bind="plotData.input_qty" style="color: #293f5d; padding-right: 5px;"></label>
                                    </div>
                                </div>
                                <div class="plot-data-barChart">
                                    <div class="barChart-fields">
                                        <div class="barChart-value" ng-style="plotData_barChart(plotData);"></div>
                                    </div>
                                    <div class="barChart-percent">
                                        <label class="value" ng-bind="(plotData.inv_qty / (plotData.input_qty == 0 ? 1 : plotData.input_qty)) * 100 +'%'" style="padding-right: 5px;"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span ng-repeat-end/>
                    </div>
                    <span ng-repeat-end/>
                </div>
            </div>
        </div>    
    </div>
</div>
